<template>
  <div class="finalorder">
    <div class="finalorder-address" @click="goresslist">
      <p>
        <span
          style="
            background-color: green;
            color: white;
            font-size: 14px;
            padding: 3px;
            margin-right: 2px;
          "
          >默认</span
        >
        <span style="margin-right: 10px; font-weight: bold">{{
          username
        }}</span>
        <span>{{ phone }}</span>
      </p>
      <div
        style="display: flex; justify-content: space-between; margin-top: 5px"
      >
        <div style="padding-left: 37px">{{ address }}</div>
        <div style="color: darkgray">></div>
      </div>
    </div>

    <div class="orderList">
      <div class="orderList-one" v-for="item in shopdaralist" :key="item.id">
        <img
          :src="item.imgurl"
          style="width: 80px; height: 80px; border-radius: 10px"
        />
        <p style="font-weight: bold">{{ item.title }}</p>
        <div>
          <p style="font-weight: bold">￥{{ item.price }}</p>
          <p style="color: darkgray">数量：x{{ item.acount }}</p>
        </div>
      </div>
      <p
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          padding-right: 10px;
        "
      >
        <span style="font-weight: bold">运费</span>
        <span style="color: darkgray">+￥8.00</span>
      </p>
      <p
        style="
          display: flex;
          justify-content: space-between;
          padding-right: 10px;
        "
      >
        <span style="font-weight: bold">合计:</span>
        <span style="color: red; font-weight: bold">￥{{ getShopPrice }}</span>
      </p>
    </div>

    <!-- 订单信息 -->
    <div class="order-text">
      <p style="font-weight: bold; font-size: 20px">订单信息</p>
      <p style="margin: 3px 0; display: flex; align-items: center">
        <span>订单编号</span>
        <span style="margin: 0 10px">{{ orderId }}</span>
        <van-button type="default" size="mini">复制</van-button>
      </p>
      <p>
        <span>下单时间</span> <span>{{ orderTime }}</span>
      </p>
    </div>

    <!-- 确认订单/取消订单 -->
    <div class="order">
      <van-button
        type="default"
        style="margin-right: 10px; margin-top: 3px; border-radius: 20px"
        @click="cancleorder"
        >取消订单</van-button
      >
      <van-button type="success" style="border-radius: 20px" @click="gopayment"
        >立即支付</van-button
      >
    </div>
  </div>
</template>
<script>
import router from "@/router";
import request from "@/utils/request";
export default {
  data() {
    return {
      shopdaralist: [],
      username: "",
      phone: "",
      address: "",
    };
  },
  async created() {
    // 获取已经勾选了的商品数据
    const result = await request.get("/good/shopdata");
    if (result.data.code === 200) {
      this.shopdaralist = result.data.shopdaralist;
    }
    const now = new Date();
    var year = now.getFullYear(); // 年份
    var month = now.getMonth() + 1; // 月份，+1因为getMonth()返回0-11
    var day = now.getDate(); // 日期
    var hours = now.getHours(); // 小时
    var minutes = now.getMinutes(); // 分钟
    var seconds = now.getSeconds(); // 秒
    var milliseconds = now.getMilliseconds(); // 毫秒
    const id =
      String(year) +
      String(month) +
      String(day) +
      String(hours) +
      String(minutes) +
      String(seconds) +
      String(milliseconds);
    this.shopdaralist.forEach((item) => (item["ordertime"] = id));
    // await request.post("/good/orderdata", this.shopdaralist);

    // 获取默认地址
    const result1 = await request.get("/good/defaultresslist");
    if (result1.data.code === 200) {
      this.username = result1.data.defaultresslist.name;
      this.phone = result1.data.defaultresslist.tel;
      this.address =
        result1.data.defaultresslist.province +
        result1.data.defaultresslist.city +
        result1.data.defaultresslist.county +
        result1.data.defaultresslist.addressDetail;
    }
  },
  computed: {
    // 计算商品总价格
    getShopPrice() {
      const prcie = this.shopdaralist.reduce(
        (total, item) => (total += Number(item.price) * Number(item.acount)),
        0
      );
      return Number(prcie + 8).toFixed(2);
    },

    // 订单编号
    orderId() {
      const now = new Date();
      var year = now.getFullYear(); // 年份
      var month = now.getMonth() + 1; // 月份，+1因为getMonth()返回0-11
      var day = now.getDate(); // 日期
      var hours = now.getHours(); // 小时
      var minutes = now.getMinutes(); // 分钟
      var seconds = now.getSeconds(); // 秒
      var milliseconds = now.getMilliseconds(); // 毫秒
      const id =
        String(year) +
        String(month) +
        String(day) +
        String(hours) +
        String(minutes) +
        String(seconds) +
        String(milliseconds);
      return id;
    },

    orderTime() {
      const now = new Date();
      var year = now.getFullYear(); // 年份
      var month = now.getMonth() + 1; // 月份，+1因为getMonth()返回0-11
      var day = now.getDate(); // 日期
      var hours = now.getHours(); // 小时
      var minutes = now.getMinutes(); // 分钟
      var seconds = now.getSeconds(); // 秒
      var milliseconds = now.getMilliseconds(); // 毫秒
      const time =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      return time;
    },
  },
  methods: {
    async gopayment() {
      // 当点击立即支付时应该做的事情
      await request.post("/good/paymentorder", this.shopdaralist);
      router.replace("/payment");
    },

    // 取消支付订单
    async cancleorder() {
      await request.post("/good/cancelorder", this.shopdaralist);
      router.replace("/cart");
    },

    // 跳转地址选择页
    goresslist() {
      router.push({ path: "/resslist", query: { isfinalorder: true } });
    },
  },
};
</script>
<style lang="scss">
.finalorder {
  width: 100%;
  background-color: rgb(242, 241, 241);
  height: 90vh;
  .finalorder-address {
    padding: 15px;
    background-color: #fff;
  }
  .orderList {
    width: 100%;
    background-color: #fff;
    padding: 10px;
    width: 100%;
    min-height: 200px;
    margin-top: 10px;
    max-height: 500px;
    overflow: auto;
    // padding: 20px;
    box-sizing: border-box; // 开启怪异盒模型
    .orderList-one {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding-right: 10px;
    }
  }
  .order-text {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box; // 开启怪异盒模型
  }
  .order {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    padding-left: 180px;
  }
}
</style>
